<template>
  <div class="attendance">
    <!-- 头部 -->
    <div class="header">
      <!-- 左侧搜索框 -->
      <div class="left">
        姓名：
        <el-input
          placeholder="请输入姓名"
          v-model="name"
          clearable
          style="float: right; width: 200px; margin-right: 20px"
        >
        </el-input>
        部门：
        <el-input
          placeholder="请输入部门"
          v-model="department"
          clearable
          style="float: right; width: 200px; margin-right: 20px"
        >
        </el-input>
        考勤月份：
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="month"
            placeholder="选择日期"
            format="yyyy 年 MM 月"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </div>
      </div>
      <!-- 右侧按钮 -->
      <div class="right">
        <!-- 查询按钮 -->
        <el-button
          type="primary"
          icon="el-icon-search"
          style="
            width: 94px;
            height: 40px;
            margin-top: 32px;
            margin-right: 15px;
          "
          @click="goSearch()"
          >查询</el-button
        >
        <!-- 新增按钮 -->
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          style="
            width: 94px;
            height: 40px;
            margin-top: 32px;
            margin-right: 15px;
          "
          @click="dialogFormVisible = true"
          >新增</el-button
        >
        <!-- 新增员工考勤对话框 -->
        <el-dialog
          title="新增员工考勤信息"
          width="65%"
          top="7vh"
          :visible.sync="dialogFormVisible"
        >
          <el-form :model="form" :rules="rules">
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="员工姓名："
                  prop="empName"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.empName"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="部门："
                  prop="empDept"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.empDept"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="身份证号："
                  prop="empIdCardNo"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.empIdCardNo"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="员工编号："
                  prop="empStaNum"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.empStaNum"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="考勤月份："
                  prop="empMonth"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.empMonth"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="员工序号："
                  prop="empId"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.empId" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="迟到早退次数："
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="form.empLateNum" placeholder="请选择次数">
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="缺卡（次）："
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="form.empMissCard"
                    placeholder="请选择次数"
                  >
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="旷工（天）："
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="form.empAbsen" placeholder="请选择天数">
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="年假（天）："
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="form.empAnnua" placeholder="请选择天数">
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="产假（天）："
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="form.empMaternity"
                    placeholder="请选择次数"
                  >
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="餐补（天）："
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="form.empMealSup" placeholder="请选择天数">
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="病假（天）："
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="form.empSick" placeholder="请选择天数">
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="事假（天）："
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="form.empPresonal"
                    placeholder="请选择次数"
                  >
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="加班天数：" :label-width="formLabelWidth">
                  <el-select v-model="form.empWorkD" placeholder="请选择天数">
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="总出勤天数："
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="form.empWorkDNum"
                    placeholder="请选择天数"
                  >
                    <el-option label="无" value="0"></el-option>
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                    <el-option label="11" value="11"></el-option>
                    <el-option label="12" value="12"></el-option>
                    <el-option label="13" value="13"></el-option>
                    <el-option label="14" value="14"></el-option>
                    <el-option label="15" value="15"></el-option>
                    <el-option label="16" value="16"></el-option>
                    <el-option label="17" value="17"></el-option>
                    <el-option label="18" value="18"></el-option>
                    <el-option label="19" value="19"></el-option>
                    <el-option label="20" value="20"></el-option>
                    <el-option label="21" value="21"></el-option>
                    <el-option label="22" value="22"></el-option>
                    <el-option label="23" value="23"></el-option>
                    <el-option label="24" value="24"></el-option>
                    <el-option label="25" value="25"></el-option>
                    <el-option label="26" value="26"></el-option>
                    <el-option label="27" value="27"></el-option>
                    <el-option label="28" value="28"></el-option>
                    <el-option label="29" value="29"></el-option>
                    <el-option label="30" value="30"></el-option>
                    <el-option label="31" value="31"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="绩效比例：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.empPerRatio"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="补发上月：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.empReiLd"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="扣除上月：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.empDeductLastM"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建人：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.empCteateUser"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.empCreateTime"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="备注1：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.remark1"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="备注2：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.remark2"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="备注3：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.remark3"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="goAdd()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 上传按钮 -->
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button
            type="primary"
            style="width: 94px; height: 40px; margin-right: 15px"
            ><i class="el-icon-upload el-icon--right"></i>上传</el-button
          >
        </el-upload>
        <!-- 下载按钮 -->
        <el-button
          type="primary"
          style="width: 94px; height: 40px; margin-top: 32px"
          ><i class="el-icon-download"></i>下载</el-button
        >
      </div>
    </div>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 表格内容 -->
    <div class="content">
      <h3 style="margin-bottom: 20px">考勤月份：{{ value2 }}</h3>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
        height="520"
      >
        <el-table-column
          align="center"
          fixed
          type="index"
          label="序号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          fixed
          prop="empName"
          label="员工姓名"
          width="150"
        >
        </el-table-column>
        <el-table-column align="center" prop="empDept" label="部门" width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="empIdCardNo"
          label="身份证号"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empStaNum"
          label="员工编号"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empMonth"
          label="考勤月份"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empLateNum"
          label="迟到早退次数"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="empMissCard" label="缺卡（次）" width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="empAbsen"
          label="旷工 （天）"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empAnnua"
          label="年假（天）"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empMaternity"
          label="产假（天）"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empMealSup"
          label="餐补（天）"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empSick"
          label="病假（天）"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empPresonal"
          label="事假（天）"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empWorkD"
          label="加班天数"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empWorkDNum"
          label="总出勤天数"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empPerRatio"
          label="绩效比例"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empReiLd"
          label="补发上月"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empDeductLastM"
          label="扣除上月"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empCreateTime"
          label="创建时间"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empCteateUser"
          label="创建人"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empUpdateTime"
          label="修改时间"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="empUpdateUser"
          label="修改人"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark1"
          label="备注1"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark2"
          label="备注2"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark3"
          label="备注3"
          width="100"
        >
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button
              type="primary"
              size="small"
              align="center"
              style="font-size: 16px; margin-right: 10px"
              @click="goChange(scope.row)"
            >
              编辑
            </el-button>
            <!-- 点击编辑弹出对话框 -->
            <el-dialog
              title="编辑员工考勤信息"
              :append-to-body="true"
              :visible.sync="dialogFormVisible2"
            >
              <el-form :model="form2">
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="员工姓名："
                      prop="empName"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form2.empName"
                        autocomplete="off"
                        :disabled="true"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="部门："
                      prop="empDept"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form2.empDept"
                        autocomplete="off"
                        :disabled="true"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="身份证号："
                      prop="empIdCardNo"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form2.empIdCardNo"
                        autocomplete="off"
                        :disabled="true"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="总出勤天数："
                      prop="empWorkDNum"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form2.empWorkDNum"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="迟到早退次数："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empLateNum"
                        placeholder="请选择次数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="缺卡（次）："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empMissCard"
                        placeholder="请选择次数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="旷工（天）："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empAbsen"
                        placeholder="请选择天数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="年假（天）："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empAnnua"
                        placeholder="请选择天数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="产假（天）："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empMaternity"
                        placeholder="请选择次数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="餐补（天）："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empMealSup"
                        placeholder="请选择天数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="病假（天）："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empSick"
                        placeholder="请选择天数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="事假（天）："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empPresonal"
                        placeholder="请选择天数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="加班天数："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empWorkD"
                        placeholder="请选择天数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="总出勤天数："
                      :label-width="formLabelWidth"
                    >
                      <el-select
                        v-model="form2.empWorkDNum"
                        placeholder="请选择天数"
                      >
                        <el-option label="无" value="0"></el-option>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                        <el-option label="10" value="10"></el-option>
                        <el-option label="11" value="11"></el-option>
                        <el-option label="12" value="12"></el-option>
                        <el-option label="13" value="13"></el-option>
                        <el-option label="14" value="14"></el-option>
                        <el-option label="15" value="15"></el-option>
                        <el-option label="16" value="16"></el-option>
                        <el-option label="17" value="17"></el-option>
                        <el-option label="18" value="18"></el-option>
                        <el-option label="19" value="19"></el-option>
                        <el-option label="20" value="20"></el-option>
                        <el-option label="21" value="21"></el-option>
                        <el-option label="22" value="22"></el-option>
                        <el-option label="23" value="23"></el-option>
                        <el-option label="24" value="24"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="26" value="26"></el-option>
                        <el-option label="27" value="27"></el-option>
                        <el-option label="28" value="28"></el-option>
                        <el-option label="29" value="29"></el-option>
                        <el-option label="30" value="30"></el-option>
                        <el-option label="31" value="31"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="绩效比例："
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form2.empPerRatio"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="补发上月："
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form2.empReiLd"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="扣除上月："
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form2.empDeductLastM"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="创建人："
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form2.empCteateUser"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="备注1：" :label-width="formLabelWidth">
                      <el-input
                        v-model="form2.remark1"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="备注2：" :label-width="formLabelWidth">
                      <el-input
                        v-model="form2.remark2"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="备注3：" :label-width="formLabelWidth">
                      <el-input
                        v-model="form2.remark3"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible2 = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 详情按钮 -->
            <el-button
              type="success"
              size="small"
              align="center"
              style="font-size: 16px"
              @click="goCalendar(scope.row)"
            >
              详情
            </el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              size="small"
              align="center"
              style="font-size: 16px"
              @click="del(scope.index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页器 -->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="upChange"
        @next-click="nextChange"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        :current-page="currentPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索框数据
      name: "",
      department: "",
      value2: "",
      // 分页数据
      pageSize: 5,
      currentPage: 1,
      total: 100,
      // 表格数据
      tableData: [
        {
          empId: 1,
          empName: "小张",
          empDept: "财务",
          empIdCardNo: 3123427424324,
          empStaNum: "001",
          empMonth: "2022-09",
          empLateNum: "0",
          empMissCard: 1,
          empAbsen: 1,
          empAnnua: "无",
          empMaternity: "无",
          empMealSup: "无",
          empSick: "无",
          empPresonal: "无",
          empWorkD: "无",
          empWorkDNum: "30",
          empPerRatio: "无",
          empReiLd: "无",
          empDeductLastM: "无",
          empCreateTime: "2022-10-20",
          empCteateUser: "lisa",
          empUpdateTime: "无",
          empUpdateUser: "无",
          remark1: "无",
          remark2: "无",
          remark3: "无",
          day1: "出勤",
          day2: "缺卡",
          day3: "出勤",
          day4: "出勤",
          day5: "出勤",
          day6: "出勤",
          day7: "出勤",
          day8: "出勤",
          day9: "出勤",
          day10: "出勤",
          day11: "出勤",
          day12: "出勤",
          day13: "出勤",
          day14: "出勤",
          day15: "出勤",
          day16: "出勤",
          day17: "出勤",
          day18: "出勤",
          day19: "出勤",
          day20: "出勤",
          day21: "出勤",
          day22: "出勤",
          day23: "出勤",
          day24: "缺卡",
          day25: "缺卡",
          day26: "缺卡",
          day27: "缺卡",
          day28: "缺卡",
          day29: "缺卡",
          day30: "缺卡",
          day31: "缺卡",
        },
        {
          empId: 2,
          empName: "小美",
          empDept: "财务",
          empIdCardNo: 3123427424324,
          empStaNum: "001",
          empMonth: "2022-09",
          empLateNum: 0,
          empMissCard: 1,
          empAbsen: 1,
          empAnnua: "无",
          empMaternity: "无",
          empMealSup: "无",
          empSick: "无",
          empPresonal: "无",
          empWorkD: "无",
          empWorkDNum: "30",
          empPerRatio: "无",
          empReiLd: "无",
          empDeductLastM: "无",
          empCreateTime: "2022-10-20",
          empCteateUser: "lisa",
          empUpdateTime: "无",
          empUpdateUser: "无",
          remark1: "无",
          remark2: "无",
          remark3: "无",
          day1: "出勤",
          day2: "缺卡",
          day3: "出勤",
          day4: "出勤",
          day5: "出勤",
          day6: "出勤",
          day7: "出勤",
          day8: "出勤",
          day9: "出勤",
          day10: "出勤",
          day11: "出勤",
          day12: "出勤",
          day13: "出勤",
          day14: "出勤",
          day15: "出勤",
          day16: "出勤",
          day17: "出勤",
          day18: "出勤",
          day19: "出勤",
          day20: "出勤",
          day21: "出勤",
          day22: "出勤",
          day23: "出勤",
          day24: "缺卡",
          day25: "缺卡",
          day26: "缺卡",
          day27: "缺卡",
          day28: "缺卡",
          day29: "缺卡",
          day30: "缺卡",
          day31: "缺卡",
        },
        {
          empId: 3,
          empName: "懒羊羊",
          empDept: "财务",
          empIdCardNo: 3123427424324,
          empStaNum: "001",
          empMonth: "2022-09",
          empLateNum: 0,
          empMissCard: 1,
          empAbsen: 1,
          empAnnua: "无",
          empMaternity: "无",
          empMealSup: "无",
          empSick: "无",
          empPresonal: "无",
          empWorkD: "无",
          empWorkDNum: "30",
          empPerRatio: "无",
          empReiLd: "无",
          empDeductLastM: "无",
          empCreateTime: "2022-10-20",
          empCteateUser: "lisa",
          empUpdateTime: "无",
          empUpdateUser: "无",
          remark1: "无",
          remark2: "无",
          remark3: "无",
          day1: "出勤",
          day2: "缺卡",
          day3: "出勤",
          day4: "出勤",
          day5: "出勤",
          day6: "出勤",
          day7: "出勤",
          day8: "出勤",
          day9: "出勤",
          day10: "出勤",
          day11: "出勤",
          day12: "出勤",
          day13: "出勤",
          day14: "出勤",
          day15: "出勤",
          day16: "出勤",
          day17: "出勤",
          day18: "出勤",
          day19: "出勤",
          day20: "出勤",
          day21: "出勤",
          day22: "出勤",
          day23: "出勤",
          day24: "缺卡",
          day25: "缺卡",
          day26: "缺卡",
          day27: "缺卡",
          day28: "缺卡",
          day29: "缺卡",
          day30: "缺卡",
          day31: "缺卡",
        },
        {
          empId: 4,
          empName: "光头强",
          empDept: "财务",
          empIdCardNo: 3123427424324,
          empStaNum: "001",
          empMonth: "2022-09",
          empLateNum: 0,
          empMissCard: 1,
          empAbsen: 1,
          empAnnua: "无",
          empMaternity: "无",
          empMealSup: "无",
          empSick: "无",
          empPresonal: "无",
          empWorkD: "无",
          empWorkDNum: "30",
          empPerRatio: "无",
          empReiLd: "无",
          empDeductLastM: "无",
          empCreateTime: "2022-10-20",
          empCteateUser: "lisa",
          empUpdateTime: "无",
          empUpdateUser: "无",
          remark1: "无",
          remark2: "无",
          remark3: "无",
          day1: "出勤",
          day2: "缺卡",
          day3: "出勤",
          day4: "出勤",
          day5: "出勤",
          day6: "出勤",
          day7: "出勤",
          day8: "出勤",
          day9: "出勤",
          day10: "出勤",
          day11: "出勤",
          day12: "出勤",
          day13: "出勤",
          day14: "出勤",
          day15: "出勤",
          day16: "出勤",
          day17: "出勤",
          day18: "出勤",
          day19: "出勤",
          day20: "出勤",
          day21: "出勤",
          day22: "出勤",
          day23: "出勤",
          day24: "缺卡",
          day25: "缺卡",
          day26: "缺卡",
          day27: "缺卡",
          day28: "缺卡",
          day29: "缺卡",
          day30: "缺卡",
          day31: "缺卡",
        },
        {
          empId: 5,
          empName: "熊大",
          empDept: "财务",
          empIdCardNo: 3123427424324,
          empStaNum: "001",
          empMonth: "2022-09",
          empLateNum: 0,
          empMissCard: 1,
          empAbsen: 1,
          empAnnua: "无",
          empMaternity: "无",
          empMealSup: "无",
          empSick: "无",
          empPresonal: "无",
          empWorkD: "无",
          empWorkDNum: "30",
          empPerRatio: "无",
          empReiLd: "无",
          empDeductLastM: "无",
          empCreateTime: "2022-10-20",
          empCteateUser: "lisa",
          empUpdateTime: "无",
          empUpdateUser: "无",
          remark1: "无",
          remark2: "无",
          remark3: "无",
          day1: "出勤",
          day2: "缺卡",
          day3: "出勤",
          day4: "出勤",
          day5: "出勤",
          day6: "出勤",
          day7: "出勤",
          day8: "出勤",
          day9: "出勤",
          day10: "出勤",
          day11: "出勤",
          day12: "出勤",
          day13: "出勤",
          day14: "出勤",
          day15: "出勤",
          day16: "出勤",
          day17: "出勤",
          day18: "出勤",
          day19: "出勤",
          day20: "出勤",
          day21: "出勤",
          day22: "出勤",
          day23: "出勤",
          day24: "缺卡",
          day25: "缺卡",
          day26: "缺卡",
          day27: "缺卡",
          day28: "缺卡",
          day29: "缺卡",
          day30: "缺卡",
          day31: "缺卡",
        },
        {
          empId: 6,
          empName: "熊二",
          empDept: "财务",
          empIdCardNo: 3123427424324,
          empStaNum: "001",
          empMonth: "2022-09",
          empLateNum: 0,
          empMissCard: 1,
          empAbsen: 1,
          empAnnua: "无",
          empMaternity: "无",
          empMealSup: "无",
          empSick: "无",
          empPresonal: "无",
          empWorkD: "无",
          empWorkDNum: "30",
          empPerRatio: "无",
          empReiLd: "无",
          empDeductLastM: "无",
          empCreateTime: "2022-10-20",
          empCteateUser: "lisa",
          empUpdateTime: "无",
          empUpdateUser: "无",
          remark1: "无",
          remark2: "无",
          remark3: "无",
          day1: "出勤",
          day2: "缺卡",
          day3: "出勤",
          day4: "出勤",
          day5: "出勤",
          day6: "出勤",
          day7: "出勤",
          day8: "出勤",
          day9: "出勤",
          day10: "出勤",
          day11: "出勤",
          day12: "出勤",
          day13: "出勤",
          day14: "出勤",
          day15: "出勤",
          day16: "出勤",
          day17: "出勤",
          day18: "出勤",
          day19: "出勤",
          day20: "出勤",
          day21: "出勤",
          day22: "出勤",
          day23: "出勤",
          day24: "缺卡",
          day25: "缺卡",
          day26: "缺卡",
          day27: "缺卡",
          day28: "缺卡",
          day29: "缺卡",
          day30: "缺卡",
          day31: "缺卡",
        },
        {
          empId: 7,
          empName: "吉吉国王",
          empDept: "财务",
          empIdCardNo: 3123427424324,
          empStaNum: "001",
          empMonth: "2022-09",
          empLateNum: 0,
          empMissCard: 1,
          empAbsen: 1,
          empAnnua: "无",
          empMaternity: "无",
          empMealSup: "无",
          empSick: "无",
          empPresonal: "无",
          empWorkD: "无",
          empWorkDNum: "30",
          empPerRatio: "无",
          empReiLd: "无",
          empDeductLastM: "无",
          empCreateTime: "2022-10-20",
          empCteateUser: "lisa",
          empUpdateTime: "无",
          empUpdateUser: "无",
          remark1: "无",
          remark2: "无",
          remark3: "无",
          day1: "出勤",
          day2: "缺卡",
          day3: "出勤",
          day4: "出勤",
          day5: "出勤",
          day6: "出勤",
          day7: "出勤",
          day8: "出勤",
          day9: "出勤",
          day10: "出勤",
          day11: "出勤",
          day12: "出勤",
          day13: "出勤",
          day14: "出勤",
          day15: "出勤",
          day16: "出勤",
          day17: "出勤",
          day18: "出勤",
          day19: "出勤",
          day20: "出勤",
          day21: "出勤",
          day22: "出勤",
          day23: "出勤",
          day24: "缺卡",
          day25: "缺卡",
          day26: "缺卡",
          day27: "缺卡",
          day28: "缺卡",
          day29: "缺卡",
          day30: "缺卡",
          day31: "缺卡",
        },
      ],
      // 新增弹出对话框
      dialogTableVisible: false, //dialog隐藏与显示
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        empId: "",
        empName: "",
        empDept: "",
        empIdCardNo: "",
        empStaNum: "",
        empMonth: "",
        empWorkDNum: "",
        empLateNum: "",
        empMissCard: "",
        empAbsen: "",
        empAnnua: "",
        empMaternity: "",
        empMealSup: "",
        empSick: "",
        empPresonal: "",
        empWorkD: "",
        empWorkDNum: "",
        empPerRatio: "",
        empReiLd: "",
        empDeductLastM: "",
        empCteateUser: "",
        empCreateTime: "",
        remark1: "",
        remark2: "",
        remark3: "",

        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // 编辑弹出对话框
      form2: {
        empName: "",
        empDept: "",
        empIdCardNo: "",
        empStaNum: "",
        empMonth: "",
        empWorkDNum: "",
        empLateNum: "",
        empMissCard: "",
        empAbsen: "",
        empAnnua: "",
        empMaternity: "",
        empMealSup: "",
        empSick: "",
        empPresonal: "",
        empWorkD: "",
        empWorkDNum: "",
        empPerRatio: "",
        empReiLd: "",
        empDeductLastM: "",
        empCteateUser: "",
        empCreateTime: "",
        remark1: "",
        remark2: "",
        remark3: "",

        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      // 新增员工考勤必填项
      rules: {
        empName: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
        ],
        empDept: [
          { required: true, message: "请输入员工部门", trigger: "blur" },
        ],
        empIdCardNo: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        empStaNum: [
          { required: true, message: "请输入员工编号", trigger: "blur" },
        ],
        empMonth: [
          { required: true, message: "请输入考勤月份", trigger: "blur" },
        ],
        empWorkDNum: [
          { required: true, message: "请输入员工总出勤天数", trigger: "blur" },
        ],
      },
      // 上传数据
      fileList: [],
    };
  },
  methods: {
    // 删除
    del(index) {
      this.tableData.splice(index, 1);
    },
    // 新增
    goAdd() {
      this.dialogFormVisible = false;
      this.tableData.push(this.form);
    },
    // 搜索按钮
    goSearch() {
      console.log("搜索");
    },
    // 表格删除按钮
    open(row) {
      console.log(row);
      this.$confirm("此操作将删除该人员的考勤信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    upChange(val) {
      this.currentPage -= 1;
    },
    nextChange(val) {
      this.currentPage += 1;
    },
    // 上传按钮
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 详情按钮查看考勤记录
    goCalendar(row) {
      this.$router.push({
        path: "/calendar",
        query: {
          row,
        },
      });
    },
    // 编辑按钮编辑员工考勤
    goChange(row) {
      this.form2 = row;
      this.dialogFormVisible2 = true;
    },
  },
};
</script>

<style lang="less" scoped>
.attendance {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .header {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 12%;
    .left {
      display: flex;
      justify-content: space-around;
      padding: 10px 0 30px 30px;
      height: 100px;
      line-height: 100px;
      font-size: 18px;
    }
    .right {
      display: flex;
      box-sizing: border-box;
      height: 100px;
      line-height: 100px;
      font-size: 18px;
      padding: 10px 0 30px 300px;
      .el-input {
        width: 215px;
      }
    }
  }
  .content {
    box-sizing: border-box;
    width: 100%;
    height: 70%;
    padding-left: 25px;
    .el-table {
      height: 526px;
    }
  }
  .footer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 10%;
    .el-pagination {
      position: absolute;
      box-sizing: border-box;
      padding-right: 40px;
      top: 40px;
      right: 0;
    }
  }
}
</style>